<template>
  <div style="display: none" :id="`${id}-parent`">
    <div :id="id" style="padding: 0 10px; font-size: 12px">
      <div
        style="padding: 0 5px 50px"
        v-for="item in printOutStrageData"
        :key="item.washCode"
      >
        <div style="text-align: center; font-size: 16px; font-weight: bold">
          童摇科技洗护管理系统
        </div>
        <div style="text-align: center; font-size: 16px; font-weight: bold">
          出库单
        </div>
        <div style="margin-bottom: 5px">
          <img :class="`code-${item.id}`" style="width: 100%" />
        </div>
        <div style="margin-bottom: 5px">日期：{{ printTime }}</div>
        <div style="margin-bottom: 5px">
          门店名称： {{ shopListMap[item.shopId].shopName }}
        </div>

        <div style="margin-bottom: 5px">订单号：{{ item.orderNo }}</div>

        <div style="margin-bottom: 5px">手机号码：{{ item.customPhone }}</div>
        <div style="margin-bottom: 5px">
          渠道：{{ orderComeFromMap[item.comeFrom] }}
        </div>
        <div style="margin-bottom: 5px">鞋子数量：{{ item.shoeNum }} 双</div>
        <div style="margin-bottom: 5px; display: flex">
          <div>商品信息：</div>
          <div style="flex: 1; margin-bottom: 5px; border-radius: 5px">
            <div v-for="item in item.orderGoodPoList">
              {{ item.name }}[{{
                item.price
              }}][{{ item.buyNum }}份]
            </div>
          </div>
        </div>

        <div>
          <div style="display: flex; margin-bottom: 5px">
            <div style="flex: 1; margin-right: 5px; white-space: nowrap">
              水洗码
            </div>
            <div style="flex: 0 0 30px; margin-right: 5px; white-space: nowrap">
              类型
            </div>
            <div style="flex: 0 0 30px; white-space: nowrap">货架号</div>
          </div>

          <div
            v-for="(item, index) in item.shoePoList"
            style="display: flex; margin-bottom: 5px"
          >
            <div style="flex: 1; margin-right: 5px; white-space: nowrap">
              {{ item.washCode }}
            </div>
            <div style="flex: 0 0 30px; margin-right: 5px; white-space: nowrap">
              {{ item.washType }}
            </div>
            <div style="flex: 0 0 30px; white-space: nowrap">
              {{ item.srgCode }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <button ref="printBtn" @click="setTime" v-print="printObj" />
  </div>
</template>

<script>
import { formatDateTime } from "@/utils/formate";
import { orderComeFromMap } from "@/config/index";
import JSBarcode from "jsbarcode";
export default {
  props: ["printOutStrageData", "productListMap", "shopListMap", "id"],
  data() {
    return {
      printObj: {
        id: this.id,
        popTitle: "打印出库单",
      },
      printTime: "",
      orderComeFromMap,
    };
  },

  watch: {
    printOutStrageData: {
      handler: function (val) {
        this.$nextTick(() => {
          val.forEach((item) => {
            JSBarcode(`.code-${item.id}`, item.orderNo, {
              height: 80,
              displayValue: false,
            });
          });
          document.querySelector(`#${this.id}-parent`).style.height =
            document.querySelector(`#${this.id}`).offsetHeight + "px";
        });
      },
      deep: true,
    },
  },

  methods: {
    formatDateTime,
    setTime() {
      this.printTime = formatDateTime(new Date().getTime(), "YYYY年MM月DD日");
    },
  },
};
</script>
